<template>
  <div class="list" ref="wrapper">
      <div>
          <div class="cityLocation">
            <div class="location">当前城市</div>
            <div class="button1">{{this.$store.state.city}}</div>
          </div>
          <div class="cityHot">
            <div class="hot">热门城市</div>
            <div class="button1"
                 v-for="item of hot"
                 :key="item.id"
                 @touchstart="choiceCity(item.name)"
            >
               {{item.name}}
            </div>
          </div>
          <div class="moreCity"
               v-for="(obj,key) of cities"
               :key="key"
               :ref="key"
          >
            <div class="moreList">{{key}}</div>
              <ul>
                <li
                  class="boder-topbottom"
                  v-for="objinner of obj"
                  :key="objinner.id"
                  @click="choiceCity(objinner.name)"
                  >
                  {{objinner.name}}
                </li>
              </ul>
          </div>
      </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
export default {
    name: 'CityList',
    props: {
      cities: Object,
      hot: Array,
      le: String
    },
    methods: {
      choiceCity (city) {
        this.$store.dispatch('changeCity', city)
        this.$router.push('/')
      }
    },
    mounted () {
        // this.scroll = new BScroll(this.$refs.wrapper);
        // better-scroll的原因，默认它会阻止touch事件。所以在配置中需要加上click: true
        // myScroll = newIScroll('#wrapper', { mouseWheel: true, click: true, tap: true });
      this.scroll = new BScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
    },

    watch: {
      le () {
        if (this.le) {
          const element = this.$refs[this.le][0]
          this.scroll.scrollToElement(element)
        }
      }
    }
  }
</script>
<style scoped>
  .list {
    position:absolute;
    left: 0;
    top:95px;
    overflow: hidden;
    right: 0;
    bottom: 0;
  }
 .location {
   line-height: 28px;
   background-color:steelblue;
   color: white;
 }
 .button1 {
   width: 27.3%;
   border: 1px solid #7e8c8d;
   padding: 7px 0;
   text-align: center;
   margin: 5px 5px;
   border-radius: 6px;
   display: inline-block;
 }
 .hot {
   line-height: 28px;
   background-color:steelblue;
   color: white;
 }
 .moreList {
   line-height: 28px;
   background-color:steelblue;
   color: white;

 }
  .moreCity ul {
    list-style: none;
  }
  .moreCity ul li {
   line-height:30px;
   margin-top:5px;
   border-bottom: 1px solid #ccc;
   margin-left:5px;
  }
</style>
